<template>
  <!-- 首页头部 -->
  <van-nav-bar v-if="home === 'home'" :title="title" class="header home-bar" >
    <template #left>
      <van-icon name="wap-nav" @click="$router.push('/cate')" />
    </template>
    <template #title>
      <van-search @click="$router.push('/search')" background="#ff1010" shape="round" placeholder="请输入搜索关键词" />
    </template>
    <template #right>
      <van-icon style="font-size: 24px; color: #ccc;" @click="$router.push('/self')" v-if="$store.is_login" name="friends-o" />
      <span v-else @click="$router.push('/login')" class="login_btn">登录</span>
    </template>
  </van-nav-bar>

  <!-- 非首页头部 -->
  <van-nav-bar v-else @click-left="$router.back()" :title="title" left-arrow class="header">
    <template #title v-if="center === 'search'">
      <van-search 
      autocomplete="off"
      v-model="inputText"
      @update:model-value="searchHandler"
      @click="$router.push('/search')" 
      @search="btnSearchHandler"
      shape="round" 
      placeholder="请输入搜索关键词" />
    </template>
    <template #right v-if="right === 'search'">
      <van-button @click="btnSearchHandler" type="danger" size="mini">搜索</van-button>
    </template>
    <template #right v-if="right === 'more'">
      <van-icon name="ellipsis" color="#8f9299" />
    </template>
  </van-nav-bar>

</template>
<script setup lang="ts">
import useUserStore from '../store/user'
import { ref } from 'vue'
const $store = useUserStore() as any
interface HeaderInfo {
  right?: string
  center?: string
  title?: string
  home?: string
}
defineProps <HeaderInfo>()
interface EmitsInfo {
  (el: 'searchText' , str: string): void
  (el: 'btnSearch' , str: string): void
}

const inputText = ref<string>('')
const emits = defineEmits<EmitsInfo>()
const searchHandler = () => {
  emits('searchText', inputText.value)
}
const btnSearchHandler = () => {
  emits('btnSearch', inputText.value)
}
</script>

<style scoped lang="scss">
.home-bar{
  background-color: #ff1010;
  overflow: hidden;
}
.header{
  height: 100%;
  ::v-deep .van-search{
    padding-left: 0;
  }
  ::v-deep .van-nav-bar__title{
  max-width: 100%;
  }
}

</style>